﻿<template>
  <el-select v-loading="isLoading"
             v-model="id"
             clearable
             filterable
             :multiple="multiple"
             :disabled="disabled"
             :readonly="readonly"
             @change="updateValue">
    <el-option v-for="item in dataList" :key="item.id" :value="item.id" :label="item.name"></el-option>
  </el-select>
</template>
<script>
function noop() {}
export default {
  name: "DictValueSelect",
  props: {
    //选中值
    value:{},
    //父级值
    parent:{},
    dataUrl: {},//数据接口
    data:{
      type:Array,
      default:()=>{return []}
    },//数据列表
    //数据id属性
    valueKey:{
      type:String,
      default:'id'
    },
    //提示信息
    placeholder:{},
    //是否禁用
    disabled:{
      type:Boolean,
      default:false
    },
    //是否可多选
    multiple:{
      type:Boolean,
      default:false,
    },
    //是否只读
    readonly:{
      type:Boolean,
      default:false,
    }
  },
  model: {
    prop: 'value',
    event: 'change'
  },
    data(){
      return {
          dataList:[],
          isLoading:true,
      }
    },
  computed:{
    id:{
      get(){
        return this.value;
      },
      set(value){
        this.$emit("change",value);
      }
    }
  },
  watch:{
    data(){
      this.loadDataList();
    },
    disabled(){
      this.loadDataList();
    },
    parent(){
      this.loadDataList();
    },
  },
  mounted(){
    this.loadDataList();
  },
  methods: {
    updateValue(val){
      this.$emit('input', val)
      this.$emit('change', val)
    },
    loadDataList: function () {
      this.isLoading = true;

      let url = "/dict_value/data";
      this.addAjaxCachePath(url)
      this.$get(url, {dictId:this.parent}, (response) => {
        let list = [];
        if(response.data) {
          for(let item of response.data) {
            if(item.state=='delete') {
              continue;
            }
            if(item.state!='normal') {
              item.disabled = true;
            }
            list.push(item);
          }
        }
        this.dataList = list;
        this.$emit("load",response.data,this);
      },()=>{
        this.isLoading = false;
      })
    },
    getNameMap() {
      let map = {};
      for(let item of this.dataList) {
        map[item.id] = item.name;
      }
      return map;
    },
    getDataMap() {
      let map = {};
      for(let item of this.dataList) {
        map[item.id] = item;
      }
      return map;
    }
  }
};
</script>
